/*
 * 通讯录页面
 * */
import React, { Component } from 'react';
import {
    StyleSheet,
    TouchableHighlight,
    Navigator,
    Dimensions,
    Text,
    Alert,
    ListView,
    View
} from 'react-native';
import { connect } from 'react-redux'

var GiftedListView = require('react-native-gifted-listview');

class MailList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            dataSource :"dfd"
        };
    }
    _onFetch(page = 1, callback, options) {
        setTimeout(() => {
            var rows = [
                'row '+((page - 1) * 3 + 1),
                'row '+((page - 1) * 3 + 2),
                'row '+((page - 1) * 3 + 3),
                'row '+((page - 1) * 3 + 4),
                'row '+((page - 1) * 3 + 5),
                'row '+((page - 1) * 3 + 6),
                'row '+((page - 1) * 3 + 7),
                'row '+((page - 1) * 3 + 8),
                'row '+((page - 1) * 3 + 9),
                'row '+((page - 1) * 3 + 10),
                'row '+((page - 1) * 3 + 12),
                'row '+((page - 1) * 3 + 13),
                'row '+((page - 1) * 3 + 14),
                'row '+((page - 1) * 3 + 15),
                'row '+((page - 1) * 3 + 16)
            ];
            if (page === 3) {
                callback(rows, {
                    allLoaded: true, // the end of the list is reached
                });
            } else {
                callback(rows);
            }
        }, 1000); // simulating network fetching
    }


    /**
     * When a row is touched
     * @param {object} rowData Row data
     */
    _onPress(rowData) {
        console.log(rowData+' pressed');
    }

    /**
     * Render a row
     * @param {object} rowData Row data
     */
    _renderRowView(rowData) {
        return (
            <TouchableHighlight
                style={styles.row}
                underlayColor='#c8c7cc'
                onPress={() => this._onPress(rowData)}
            >
                <Text>{rowData}</Text>
            </TouchableHighlight>
        );
    }

    render() {
        return (
            <View style={styles.container}>
                <GiftedListView
                    rowView={this._renderRowView}
                    onFetch={this._onFetch}
                    firstLoader={true} // display a loader for the first fetching
                    pagination={true} // enable infinite scrolling using touch to load more
                    refreshable={true} // enable pull-to-refresh for iOS and touch-to-refresh for Android
                    withSections={false} // enable sections
                    customStyles={{
                        paginationView: {
                          backgroundColor: 'green',
                        },
                     }}
                    refreshableTintColor="blue"
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFF',
    },
    navBar: {
        height: 64,
        backgroundColor: '#CCC'
    },
    row: {
        padding: 10,
        height: 44,
    }
});

function mapStateToProps(state) {
    return {
        state1: state
    }
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(TodoActions, dispatch)
    }
}


export default connect(
    mapStateToProps
)(MailList)

